<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: rgb(243, 243, 243);
    }

    .header {
      width: 100%;
      height: 150px;
      background: #ddd;
    }

    .content-box {
      width: 100%;
      height: 500px;
      display: flex;
    }

    .aside-left {
      background: #ddd;
      width: 70%;
      margin-top: 10px;
      height: 500px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 10px;
      box-sizing: border-box;
    }

    .aside-right {
      display: flex;
      justify-content: space-between;
      background: #ddd;
      width: 29%;
      margin-top: 10px;
      margin-left: 1%;
      height: 500px;
      padding: 10px;
      box-sizing: border-box;
    }

    .aside-left-child {
      width: 100%;
      height: 150px;
      background: #aaa;
      margin-top: 10px;
    }

    .aside-right-child {
      height: 100px;
      background: #aaa;
      flex: 1;
    }

    .aside-right-child:nth-child(2) {
      margin: 0 10px;
    }
  </style>
</head>

<body>
  <div id="app">
    <my-header></my-header>

    <div class="content-box">
      <aside-left></aside-left>
      <aside-right></aside-right>
    </div>
  </div>

  <script src="js/vue.js"></script>
  <script>
    Vue.component('myHeader', {
      template: `
        <div class="header">这是header组件</div>
      `
    })

    Vue.component('asideLeft', {
      template: `
        <div class="aside-left">
          这是aside-left组件

          <aside-left-child1></aside-left-child1>
          <aside-left-child2></aside-left-child2>
        </div>
      `
    })

    Vue.component('asideLeftChild1', {
      template: `
        <div class="aside-left-child">这是aside-left-child1组件</div>
      `
    })
    Vue.component('asideLeftChild2', {
      template: `
        <div class="aside-left-child">这是aside-left-child2组件</div>
      `
    })

    Vue.component('asideRight', {
      template: `
        <div class="aside-right">
          <aside-right-child></aside-right-child>
          <aside-right-child></aside-right-child>
          <aside-right-child></aside-right-child>
        </div>
      `
    })

    Vue.component('asideRightChild', {
      template: `
        <div class="aside-right-child">这是aside-right-child组件</div>
      `
    })
    Vue.component('asideRightChild', {
      template: `
        <div class="aside-right-child">这是aside-right-child组件</div>
      `
    })
    Vue.component('asideRightChild', {
      template: `
        <div class="aside-right-child">这是aside-right-child组件</div>
      `
    })



    var myApp = new Vue({
      el: '#app',
      data: {},
      methods: {

      }
    })
  </script>
</body>

</html>